<script>
export default {
  name: "ibalbal-tabbar",
  props:{
    active: {
      default: 1,
      type: Number
    },
    config:{
      type: Array,
      default:[]
    },
    vibrate:{
      default: false,
      type: Boolean
    }
  },
  data(){
    return{
      activeIndex:0
    }
  },
  mounted() {
    this.activeIndex = this.active
    this.$emit('changeActiveIndex', this.activeIndex)
  },
  methods:{
    changeActiveIndex(index){
      if (this.activeIndex==index) return
      if (this.vibrate){
        // heavy、medium、light
        wx.vibrateShort({type: 'heavy'})
      }
      this.activeIndex = index
      this.$emit('changeActiveIndex', index)
    }
  }
}
</script>

<template>
  <view class="tabbar">
    <view class="flex align-center justify-center">
      <view class="content flex align-center justify-around">
        <view v-for="(item,index) in config" :key="index" @click="changeActiveIndex(index+1)" :class="[activeIndex==index+1?'activeIndex':'', item.icon]" class="flex align-center justify-center yIconfont">
          <view :class="[activeIndex==index+1?'activeName':'name']" class="text-center">{{item.name || ''}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
	
	.flex {
	  display: flex;
	}
	
	.align-center {
	  align-items: center;
	}
	
	.justify-center {
	  justify-content: center;
	}
	
	.justify-around {
	  justify-content: space-around;
	}
	
	.text-center {
		text-align: center;
	}
	
.tabbar{
  z-index: 10;

  position: fixed;
  bottom: 0px;
  min-height: 120upx;
  height: calc(120upx + env(safe-area-inset-bottom));


  width: 100%;

  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 8px  rgba(0, 0, 0, 0.15);
  view{
    width: 100%;
  }
}

.content{
  position: absolute;
  view{
    width: 50px;
    height: 50px;
    margin-top: 100rpx;
    font-size: 20px;
  }
}

.name{
  font-size: 12px !important;
  padding-top: 80rpx;
  color: #000000;
  position: absolute;
}

.activeIndex{
  position: relative;
  //margin-top: 0 !important;
  animation: moveUp 1s forwards;
  opacity: 1;
  border-radius: 50px;
  box-shadow: 0px 0px 8px  rgba(0, 0, 0, 0.15);
}

.activeName{
  font-size: 12px !important;
  animation: moveUpName 1s forwards;
  padding-top: 120rpx;
  color: #000000;
  position: absolute;
}

@keyframes moveUpName {
  0%{
    color: #000000;
    animation-timing-function: cubic-bezier( 0.67, 0.17, 0.67, 0.83); /* 从快到慢 */
  }

  100% {
    color: rgba(46, 204, 113, 1);
	
  }
}

@keyframes moveUp {
  0%{
    transform:  translateY(0%);
    background: #FFFFFF;
    color: #000000;
    border: 3px solid rgba(255, 255, 255, 1);
    animation-timing-function: cubic-bezier( 0.67, 0.17, 0.67, 0.83); /* 从快到慢 */
  }

  100% {
    transform: translateY(-50%);
    color: #FFFFFF;
    background: rgba(0, 122, 233, 1);
    border: 3px solid rgba(255, 255, 255, 1);
  }
}

@import './icon.css'
</style>
